<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
      <title>2.2. Aspecto visual</title>
      <meta name="generator" content="DocBook XSL-NS Stylesheets V1.75.2">
      <link rel="home" href="indice.html" title="Manual Usuario gvHidra">
      <link rel="up" href="ch02.html" title="Cap&iacute;tulo 2. Conceptos t&eacute;cnicos de gvHidra">
      <link rel="prev" href="ch02.html" title="Cap&iacute;tulo 2. Conceptos t&eacute;cnicos de gvHidra">
      <link rel="next" href="ch02s03.html" title="2.3. L&oacute;gica de negocio">
   </head>
   <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
      <div class="navheader">
         <table width="100%" summary="Navigation header">
            <tr>
               <th colspan="3" align="center">2.2. Aspecto visual</th>
            </tr>
            <tr>
               <td width="20%" align="left"><a accesskey="p" href="ch02.html">Anterior</a>&nbsp;
               </td>
               <th width="60%" align="center">Cap&iacute;tulo 2. Conceptos t&eacute;cnicos de gvHidra</th>
               <td width="20%" align="right">&nbsp;<a accesskey="n" href="ch02s03.html">Siguiente</a></td>
            </tr>
         </table>
         <hr>
      </div>
      <div class="section" title="2.2. Aspecto visual">
         <div class="titlepage">
            <div>
               <div>
                  <h2 class="title" style="clear: both"><a name="d4e341"></a>2.2. Aspecto visual
                  </h2>
               </div>
            </div>
         </div>
             
         
             
         <div class="section" title="2.2.1. Anatom&iacute;a de una ventana gvHidra">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e343"></a>2.2.1. Anatom&iacute;a de una ventana gvHidra
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Antes de empezar a programar vamos a entender la anatom&iacute;a de una
                     ventana gvHidra.
            </p>
            
                  
            <div class="mediaobject" align="center"><img src="images/panel.png" align="middle"></div>
            
                  
            <p>Una ventana de gvHidra est&aacute; dividida en 4 secciones:</p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>Barra superior</strong></span> (1)
                     </p>
                     
                               
                     <p>En esta barra aparece alineado a la izquierda el t&iacute;tulo de la
                                  ventana, y, alineado a la derecha aparecer&aacute;n, si los hay, botones
                                  tooltip. Botones tooltip son botones que efect&uacute;an acciones
                                  relacionadas con la interfaz.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>Contenedor</strong></span> (2)
                     </p>
                     
                               
                     <p>Donde se ubicar&aacute; el formulario con los datos y campos con los
                                  que trabajaremos.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>Barra inferior</strong></span> (3)
                     </p>
                     
                               
                     <p>En ella, alineado a la izquierda, se ubicar&aacute; el paginador y,
                                  alineados a la derecha aparecer&aacute;n los botones.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>Contenedor de pesta&ntilde;as</strong></span>
                                  (4)
                     </p>
                     
                               
                     <p>En esta zona ir&aacute;n apareciendo pesta&ntilde;as con las que podremos
                                  cambiar el modo de trabajo (b&uacute;squeda, listado, registro...)
                     </p>
                             
                  </li>
               </ul>
            </div>
                
         </div>
         
             
         <div class="section" title="2.2.2. Modos de trabajo y ventanas gvHidra">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e367"></a>2.2.2. Modos de trabajo y ventanas gvHidra
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>La forma de trabajar con las ventanas gvHidra se ha clasificado
                     por modos de trabajo. Definiendo modo de trabajo como la forma de
                     representaci&oacute;n de la informaci&oacute;n con la que vamos a trabajar. Estos
                     modos de trabajo se ver&aacute;n reflejados tanto en la zona
                     <span class="emphasis"><em>Contenedor</em></span> (2) del panel como en la de
                     <span class="emphasis"><em>Contenedor de pesta&ntilde;as</em></span> (4), la pesta&ntilde;a nos indicar&aacute;
                     el modo activo.
            </p>
            
                  
            <p>Los modos que tenemos son tres que se corresponden con las
                     pesta&ntilde;as:
            </p>
            
                  
            <div class="orderedlist">
               <ol class="orderedlist" type="1">
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>B&uacute;squeda o filtro: </em></span><span class="inlinemediaobject"><img src="images/fil.png"></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>Tabular o listado: </em></span><span class="inlinemediaobject"><img src="images/lis.png"></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>Registro o edici&oacute;n: </em></span><span class="inlinemediaobject"><img src="images/edi.png"></span></p>
                             
                  </li>
               </ol>
            </div>
            
                  
            <p>Partiendo de todo lo comentado, tenemos dos formas de trabajar en
                     gvHidra:
            </p>
            
                  
            <div class="orderedlist">
               <ol class="orderedlist" type="1">
                  <li class="listitem">
                               
                     <p>Dos modos de trabajo</p>
                     
                               
                     <p>Con esto nos referimos a la forma de trabajar, en este caso
                                  partimos de una b&uacute;squeda y el resultado se muestra en una tabla o
                                  ficha, donde los datos ya son accesibles en cada uno de estos
                                  modos.
                     </p>
                     
                               
                     <p>Ej. Modo <span class="emphasis"><em>b&uacute;squeda/tabla</em></span></p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_lis.png" align="middle"></div>
                     
                               
                     <p>Ej. Modo <span class="emphasis"><em>b&uacute;squeda/ficha</em></span></p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_edi.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>Tres modos de trabajo</p>
                     
                               
                     <p>En este caso es una combinaci&oacute;n de los dos anteriores. Se
                                  parte de un panel de b&uacute;squeda, el resultado de dicha b&uacute;squeda se
                                  mostrar&aacute; en un panel tabular. En este panel tabular los datos no son
                                  accesibles, solamente se podr&aacute; efectuar el borrado de las tuplas que
                                  se seleccionen, para inserci&oacute;n o modificaci&oacute;n se pasa a un panel
                                  modo ficha.
                     </p>
                     
                               
                     <p>Ej. Modo <span class="emphasis"><em>b&uacute;squeda/tabla/ficha</em></span></p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_lis_edi.png" align="middle"></div>
                             
                  </li>
               </ol>
            </div>
                
         </div>
         
             
         <div class="section" title="2.2.3. Patrones de interfaz">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e415"></a>2.2.3. Patrones de interfaz
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Una vez visto la estructura de la ventana y los modos de trabajo
                     disponibles podemos pasar a explicar los diferentes patrones de interfaz
                     que se pueden implementar con gvHidra.
            </p>
            
                  
            <p>Todos los patrones tienen en com&uacute;n el modo b&uacute;squeda:</p>
            
                  
            <div class="mediaobject" align="center"><img src="images/busqueda.png" align="middle"></div>
            
                  
            <p><span class="emphasis"><em>[<span class="citation">NOTA: Una buena pr&aacute;ctica es
                              utilizar el prefijo "fil" para denominar algunos par&aacute;metros o nombres de
                              variables que hagan referencia al panel de
                              b&uacute;squeda.</span>]</em></span></p>
            
                  
            <p><span class="bold"><strong>Patrones</strong></span>:
            </p>
            
                  
            <div class="orderedlist">
               <ol class="orderedlist" type="1">
                  <li class="listitem">
                               
                     <p><a class="link" href="ch02s02.html#tabular">Tabular</a></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a class="link" href="ch02s02.html#registro">Registro</a></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a class="link" href="ch02s02.html#tab_reg">Tabular-Registro</a></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a class="link" href="ch02s02.html#maest_det">Maestro-detalle</a></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a class="link" href="ch02s02.html#arbol">&Aacute;rbol</a></p>
                             
                  </li>
               </ol>
            </div>
            
                  
            <p></p>
            
                  
            <div class="orderedlist">
               <ol class="orderedlist" type="1">
                  <li class="listitem">
                               
                     <p><a name="tabular"></a><span class="bold"><strong>Tabular</strong></span></p>
                     
                               
                     <p>Se corresponde con la forma de trabajo dos modos de trabajo,
                                  panel de b&uacute;squeda y panel tabular donde se trabajar&aacute; con los
                                  datos.
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_lis.png" align="middle"></div>
                     
                               
                     <p><span class="emphasis"><em>[<span class="citation">NOTA: Una buena pr&aacute;ctica es
                                           utilizar el prefijo "lis" para denominar algunos par&aacute;metros o
                                           nombres de variables que hagan referencia al panel
                                           tabular.</span>]</em></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a name="registro"></a><span class="bold"><strong>Registro</strong></span></p>
                     
                               
                     <p>Se corresponde con la forma de trabajo dos modos de trabajo,
                                  panel de b&uacute;squeda y panel registro donde se trabajar&aacute; con los
                                  datos.
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_edi.png" align="middle"></div>
                     
                               
                     <p><span class="emphasis"><em>[<span class="citation">NOTA: Una buena pr&aacute;ctica es
                                           utilizar el prefijo "edi" para denominar algunos par&aacute;metros o
                                           nombres de variables que hagan referencia al panel
                                           registro.</span>]</em></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a name="tab_reg"></a><span class="bold"><strong>Tabular-Registro</strong></span></p>
                     
                               
                     <p>Este caso corresponde a la forma de trabajo de tres modos. Un
                                  panel de b&uacute;squeda, un panel tabular donde se tendr&aacute; el resultado de
                                  la b&uacute;squeda y un panel registro donde se podr&aacute;n editar los campos de
                                  las tuplas seleccionadas en el panel tabular o insertar nuevas
                                  tuplas.
                     </p>
                     
                               
                     <p><span class="emphasis"><em>Modo tabular</em></span>:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_liss_edi.png" align="middle"></div>
                     
                               
                     <p><span class="emphasis"><em>Modo registro</em></span>:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/fil_lis_edi.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a name="maest_det"></a><span class="bold"><strong>Maestro-Detalle</strong></span></p>
                     
                               
                     <p>La parte del maestro ser&aacute; del tipo dos modos de trabajo, un
                                  panel b&uacute;squeda y un tabular o registro. En cambio en la parte
                                  correspondiente al detalle se puede plantear la forma de trabajar
                                  como dos modos (tener un s&oacute;lo tabular o registro) o tres modos
                                  (tabular y registro), con la excepci&oacute;n de que en el detalle no
                                  tenemos b&uacute;squeda.
                     </p>
                     
                               
                     <p>De esto podemos obtener diferentes combinaciones para un
                                  maestro-detalle:
                     </p>
                     
                               
                     <div class="itemizedlist">
                        <ul class="itemizedlist" type="disc">
                           <li class="listitem">
                                            
                              <p>Maestro tabular - Detalle tabular</p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Maestro tabular - Detalle registro</p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Maestro registro - Detalle tabular</p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Maestro registro - Detalle registro</p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Maestro tabular - Detalle tabular-registro</p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Maestro registro - Detalle tabular-registro</p>
                                          
                           </li>
                        </ul>
                     </div>
                     
                               
                     <p><span class="emphasis"><em>Ej. Maestro registro - Detalle
                                        tabular</em></span>:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/Medi_Dlis.png" align="middle"></div>
                     
                               
                     <p></p>
                     
                               
                     <p>Adem&aacute;s de estos patrones para el maestro-detalle contamos con
                                  un patr&oacute;n m&aacute;s complejo, el <span class="bold"><strong>Maestro &#8211; N
                                        Detalles</strong></span>. Este patr&oacute;n es una extensi&oacute;n de cualquiera de
                                  los indicados anteriormente, tendremos un maestro que tendr&aacute; varios
                                  detalles asociados. Estos detalles est&aacute;n accesibles mediante unas
                                  solapas que aparecer&aacute;n en la cabecera de la zona del detalle.
                     </p>
                     
                               
                     <p><span class="emphasis"><em>Ej. Maestro registro - N Detalles</em></span>:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/MNDetalles.png" align="middle"></div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><a name="arbol"></a><span class="bold"><strong>&Aacute;rbol</strong></span></p>
                     
                               
                     <p>El patr&oacute;n &aacute;rbol se compone de dos zonas. En la zona de la
                                  izquierda encontramos el &aacute;rbol en s&iacute;, una jerarqu&iacute;a de men&uacute;s,
                                  seleccionando cualquiera de ellos accedemos a su informaci&oacute;n que
                                  aparecer&aacute; representada en la zona de la derecha. Esta informaci&oacute;n
                                  podemos decidir representarla con un patr&oacute;n Tabular, Registro o
                                  Tabular-Registro.
                     </p>
                     
                               
                     <p><span class="emphasis"><em>Ej. </em></span><span class="emphasis"><em>&Aacute;rbol</em></span>:
                     </p>
                     
                               
                     <div class="mediaobject" align="center"><img src="images/arbol.png" align="middle"></div>
                             
                  </li>
               </ol>
            </div>
                
         </div>
           
      </div>
      <div class="navfooter">
         <hr>
         <table width="100%" summary="Navigation footer">
            <tr>
               <td width="40%" align="left"><a accesskey="p" href="ch02.html">Anterior</a>&nbsp;
               </td>
               <td width="20%" align="center"><a accesskey="u" href="ch02.html">Subir</a></td>
               <td width="40%" align="right">&nbsp;<a accesskey="n" href="ch02s03.html">Siguiente</a></td>
            </tr>
            <tr>
               <td width="40%" align="left" valign="top">Cap&iacute;tulo 2. Conceptos t&eacute;cnicos de gvHidra&nbsp;</td>
               <td width="20%" align="center"><a accesskey="h" href="indice.html">Inicio</a></td>
               <td width="40%" align="right" valign="top">&nbsp;2.3. L&oacute;gica de negocio</td>
            </tr>
         </table>
      </div>
   </body>
</html>